<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h2 align='center'>
        <!-- 命名的app节点 -->
        <div id="app">
            <!-- 第一个知识点 -->
            <ol>
                <li v-if="seen">你今天什么都没干</li>
                <li>还不复习？</li>
            </ol>
            <!-- 当下面的seen的开打开时，if的内容显示eles的内容隐藏。反之if的内容隐藏eles的内容显示 -->
            <span v-if="seen" title="继续加油">鼠标移到我这看看</span>
            <span v-else="seen" title="还看？现在去复习！">再移看一下</span>

            <br><br><br><br>
            <!-- 第二个知识点 -->
            <ul>
                <li v-for='item in toDos'>{{item.taskName}} / {{item.taskTime}}</li>
                <!-- item是自己定义的，让它在toDos里面循环。。{{item.taskName}}和{{item.taskTime}}是输出toDos里的东西，没有则不输出 -->
            </ul>

            <br><br><br><br>
            <!-- 第三个知识点 -->
            <form action="">
                <table>
                    <tr>
                        <td><label for="">账号：</label></td>
                        <td><input type="text" v-model ='formData.username'></td>
                    </tr>
                    <tr>
                        <td><label for="">密码：</label></td>
                        <td><input type="text" v-model ='formData.password'></td>
                    </tr>
                </table>
            </form>
            <label for="">{{str}}</label>
        </div>
    </h2>


    <script src="../js/jquery-3.6.0.min.js"></script>
    <!-- 要有下面那个东西，vue的语句才能用-->
    <script src="../js/vue.js"></script>

    <script>
        let app = new Vue({ //实例化Vue
            el: '#app', //连接app节点
            data() { //一个方法
                return { //返回对象
                    seen: true,//默认这个是打开的

                    toDos: [ //返回一个数组里的元素
                        { taskName: '起床', taskTime: '早上' },
                        { taskName: '上课', taskTime: '上午' },
                        { taskName: '吃饭', taskTime: '中午' },
                        { taskName: '玩手机', taskTime: '下午' },
                        { taskName: '睡觉', taskTime: '晚上' }
                    ],


                    formData:{
                        username:'',
                        password:''
                    }
                }
            },
            computed:{
                str:function(){
                    return `你输入的信息是-------账号：${this.formData.username},密码：${this.formData.password}`
                }
            }
        })
    </script>
</body>

</html>